<template>
  <view class="content">
    <u-sticky :h5NavHeight="0">
      <!-- #ifndef MP-TOUTIAO -->
      <singleHeader
        :pageTitle="$t('newAdmin.order.ReturnAfterSales')"
      ></singleHeader>
      <!-- #endif -->
      <pageHeader :items="items" :index="status" @change="change">
        <pageTime></pageTime>
      </pageHeader>
    </u-sticky>

    <pageList :items="list"></pageList>
    <toolsMore :status="moreStatus"></toolsMore>
  </view>
</template>

<script>
import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";
import pageHeader from "./components/page-header.vue";
import pageList from "./components/page-list.vue";
import pageTime from "../components/page-time.vue";
import toolsMore from "@/components/tools/tools-more.vue";

import { storeAdminOrderRefund, storeAdminOrderCancel } from "@/api/admin";

export default {
  components: {
    singleHeader,
    pageHeader,
    pageList,
    toolsMore,
    pageTime,
  },

  data() {
    return {
      status: 0,
      items: [
        { name: this.$t("newAdmin.order.all"), id: 0 },
        { name: this.$t("newAdmin.order.processing"), id: 1 },
        { name: this.$t("newAdmin.order.complete"), id: 2 },
      ],

      date_range: {
        begin_time: "", //开始日期
        end_time: "", //结束日期
      },

      // filter: [
      //   { name: "创建时间", checked: false },
      //   { name: "店铺分类", checked: false },
      //   { name: "筛选", checked: false },
      // ],

      list: [],
      moreStatus: 1,
      page: 1,
      isEnd: false,
      item: null,
    };
  },

  onLoad(opi) {
    this.$utils.hideShareMenu();

    if (opi.id) {
      this.status = parseInt(opi.id);
    }
  },

  onShow() {
    this.clearData();
    this.Emit.$on("handleList", this.handleList);
    this.Emit.$on("handleMenu", this.handleMenu);
    this.Emit.$on("handleTime", this.handleTime);
  },

  onHide() {
    this.Emit.$off("handleList");
    this.Emit.$off("handleMenu");
    this.Emit.$off("handleTime");
  },

  methods: {
    handleTime(date_range) {
      this.date_range = date_range;
      this.clearData();
    },

    handleList(type, item) {
      switch (type) {
        case "cancel":
          storeAdminOrderCancel({
            id: item.id,
          }).then((res) => {
            if (res.code === 0) {
              this.clearData();
            }
            this.$utils.toast(res.msg);
          });
          break;
      }
    },

    clearData() {
      this.page = 1;
      this.isEnd = false;
      this.list = [];

      this.storeAdminOrderRefund();
    },

    change(status) {
      this.status = status;
      this.clearData();
    },

    storeAdminOrderRefund() {
      let { list: oldList, page: pageNo, status, date_range } = this;

      this.moreStatus = 2;
      storeAdminOrderRefund({
        pageNo,
        status,
        pageSize: 20,
        ...date_range,
      })
        .then((res) => {
          uni.stopPullDownRefresh();
          this.moreStatus = 1;

          if (res.code === 0) {
            let { list, totalCount } = res.data,
              count = parseInt(totalCount);

            list.forEach((el) => {
              el.checked = false;
            });

            if (list.length) {
              oldList.push(...list);
              this.page = this.page + 1;
            }

            if (oldList.length >= count) {
              this.isEnd = true;
              this.moreStatus = 3;
            }
          }
        })
        .catch(() => {
          this.moreStatus = 1;
          uni.stopPullDownRefresh();
        });
    },
  },

  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.storeAdminOrderRefund();
  },

  onPullDownRefresh() {
    this.clearData();
  },
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
  background: #f8f8f8;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}
</style>
